<template>
  <div>
    <a-modal
      :visible="true"
      title="个人中心"
      destroyOnClose
      @cancel="cancel"
    >
      <a-form
        ref="ruleForm"
        :label-col="{span:4}"
        :wrapper-col="{span:19}"
        layout="horizontal"
      >
        <a-form-item label="头像" style="margin-bottom: 0px !important;;">
          <a-upload
            name="file"
            v-decorator="['gallery',
              {
                initialValue:record?.gallery,
                rules: [{ required: true,message:'广告内容不能为空' }]
              }
            ]"
            action="/vietnam-travel-admin/configurationManagement/v1/upload-file"
            list-type="picture-card"
            :show-upload-list="false"
            :headers="{ Authorization: getToken() }"
            :maxLength="20"
            @change="handleChange"
          >
            <img v-if="imageUrl" :src="imageUrl" alt="avatar" style="display: inline-block; width: 100px;height: 100px; border-radius: 50%;"/>
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item label="用户登录名">
          <a-input
            id="userName"
            v-decorator="['userName', { initialValue: store.getters.userInfo?.userId,}]"
            placeholder="请输入手机号..."
            :maxLength="11"
          />
        </a-form-item>
        <a-form-item label="所属角色">
          <a-input
            id="userName"
            v-decorator="['userName', { initialValue:record?.userName,}]"
            placeholder="请输入手机号..."
            :maxLength="11"
          />
        </a-form-item>
        <a-form-item label="创建时间">
          <a-input
            id="userName"
            v-decorator="['userName', { initialValue:record?.userName,}]"
            placeholder="请输入手机号..."
            :maxLength="11"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth';

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  name: 'userInfoModal',
  computed: {
    store() {
      return store
    }
  },
  data() {
    return {
      confirmLoading: false,
      img:'',
      loading: false,
      imageUrl: '',
    }
  },
  methods: {
    getToken,
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl;
          this.loading = false;
        });
        // updateAvatar({
        //   "avatar": info.file?.response?.data?.fileName,
        //   "userId": localStorage.getItem('User_Id')
        // }).then(res=>{
        //   console.log(res)
        // })
      }
    },
    // 查询角色下拉列表
    cancel() {
      this.$emit('cancel')
    },
  }
}
</script>
